<template>
  <div>
    <!-- 表单 -->
    <el-form
      ref="form"
      :model="model"
      @submit.native.prevent="save"
      label-width="100px"
      style="max-width: 800px;"
    >
      <h2 style="margin: 0 0 2rem  2rem; color: #409EFF">新建缴费记录</h2>

      <el-form-item label="选择用户">
        <el-select v-model="model.parentUser" required filterable placeholder="请选择用户">
          <el-option v-for="item in userList" :key="item._id" :label="item.name" :value="item._id"></el-option>
        </el-select>
        <el-button
          type="primary"
          style="margin-left: 1rem"
          @click="confirmUser"
          v-if="this.selectList == null"
        >确认用户</el-button>
      </el-form-item>

      <div v-if="this.selectList != null">
        <el-form-item label="居住小区">
          <strong>{{ this.selectList.parentCell.name}}</strong>
        </el-form-item>

        <el-form-item label="居住楼号">
          <strong>{{ this.selectList.parentFloor.name}}</strong>
        </el-form-item>

        <el-form-item label="应缴费用(元)" style="max-width: 170px">
          <el-input v-model="model.payMoney" disabled></el-input>
        </el-form-item>

        <el-form-item label="是否缴费">
          <el-select v-model="model.isPay" required filterable placeholder="是否已缴">
            <el-option
              v-for="item in isplay"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注">
          <el-input v-model="model.note" placeholder="备注信息"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" native-type="submit">立即创建</el-button>
          <el-button @click="cancel" :plain="true">取消</el-button>
        </el-form-item>
      </div>
    </el-form>
    <!-- 表单结束 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      model: {
        parentUser: null,
        payMoney: 200
      },
      userMoneyList: null,
      loading: true,
      userList: [],
      isplay: [
        {
          value: 0,
          label: "未缴"
        },
        {
          value: 1,
          label: "已缴"
        }
      ],
      //选择的信息
      selectList: null,
      //应该上缴的金额
      showMoney: 200
    };
  },
  mounted() {
    this.fetchUserMoney();
    this.fetchUser();
  },
  methods: {
    cancel() {
      this.$router.go(0)
    },
    //确认用户的操作
    async confirmUser() {
      const response = await this.$http.get(
        `rest/user_one/${this.model.parentUser}`
      );
      this.selectList = response.data;
      //数据赋值
      this.model.parentUser = this.selectList._id;
      this.model.parentCell = this.selectList.parentCell._id;
      this.model.parentFloor = this.selectList.parentFloor._id;

      //获取金额
      const showMoney_one = await this.$http.get(
        `rest/money_one/${this.selectList.parentCell._id}`
      );
      this.showMoney = showMoney_one.data;
      this.model.payMoney = this.showMoney.number;
    },
    //获取列表
    async fetchUserMoney() {
      const userMoney_list = await this.$http.get("rest/userMoney_list");
      this.userMoneyList = userMoney_list.data;

      //遍历时间修改格式
      this.userMoneyList.map(function(item, index, array) {
        item.updatedAt = item.updatedAt.substring(0, 10);
        array.userMoneyList = item.updatedAt;
      });

      this.loading = false;
    },
    async fetchUser() {
      const user_list = await this.$http.get("rest/user_list");
      this.userList = user_list.data;
    },
    async save() {
      if (1) {
        const response = await this.$http.post(
          "rest/add_UserMoney",
          this.model
        );
        this.fetchUserMoney();

        this.$message({
          type: "success",
          message: "保存成功",
          duration: 2000
        });
      } else {
        this.$message({
          type: "warning",
          message: "重复缴费",
          duration: 2000
        });
      }

      this.$router.push("/user/money/list");
    },
    //删除
    remove(row) {
      this.$confirm(`是否删除?"`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(async () => {
        await this.$http.delete(`rest/UserMoney/${row._id}`);
        this.$message({
          type: "success",
          message: "删除成功!"
        });

        this.fetchUserMoney();
      });
    }
  }
};
</script>

<style lang="less" scoped>
</style>